<template>
  <div class="app-container">
    <el-form :inline="true" :model="queryParams" label-width="68px" ref="queryForm" size="small" v-show="showSearch">
      <el-form-item label="创建者" prop="createId">
        <el-input
          @keyup.enter.native="handleQuery"
          clearable
          placeholder="请输入创建者"
          v-model="queryParams.createId"
        />
      </el-form-item>
      <el-form-item label="更新者" prop="updateId">
        <el-input
          @keyup.enter.native="handleQuery"
          clearable
          placeholder="请输入更新者"
          v-model="queryParams.updateId"
        />
      </el-form-item>
      <el-form-item label="是否订阅" prop="subscribe">
        <el-input
          @keyup.enter.native="handleQuery"
          clearable
          placeholder="请输入是否订阅"
          v-model="queryParams.subscribe"
        />
      </el-form-item>
      <el-form-item label="渠道来源" prop="subscribeScene">
        <el-input
          @keyup.enter.native="handleQuery"
          clearable
          placeholder="请输入渠道来源"
          v-model="queryParams.subscribeScene"
        />
      </el-form-item>
      <el-form-item label="关注时间" prop="subscribeTime">
        <el-date-picker clearable
                        placeholder="请选择关注时间"
                        type="date"
                        v-model="queryParams.subscribeTime"
                        value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="关注次数" prop="subscribeNum">
        <el-input
          @keyup.enter.native="handleQuery"
          clearable
          placeholder="请输入关注次数"
          v-model="queryParams.subscribeNum"
        />
      </el-form-item>
      <el-form-item label="取消关注时间" prop="cancelSubscribeTime">
        <el-date-picker clearable
                        placeholder="请选择取消关注时间"
                        type="date"
                        v-model="queryParams.cancelSubscribeTime"
                        value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="用户标识" prop="openId">
        <el-input
          @keyup.enter.native="handleQuery"
          clearable
          placeholder="请输入用户标识"
          v-model="queryParams.openId"
        />
      </el-form-item>
      <el-form-item label="昵称" prop="nickName">
        <el-input
          @keyup.enter.native="handleQuery"
          clearable
          placeholder="请输入昵称"
          v-model="queryParams.nickName"
        />
      </el-form-item>
      <el-form-item label="所在城市" prop="city">
        <el-input
          @keyup.enter.native="handleQuery"
          clearable
          placeholder="请输入所在城市"
          v-model="queryParams.city"
        />
      </el-form-item>
      <el-form-item label="所在国家" prop="country">
        <el-input
          @keyup.enter.native="handleQuery"
          clearable
          placeholder="请输入所在国家"
          v-model="queryParams.country"
        />
      </el-form-item>
      <el-form-item label="所在省份" prop="province">
        <el-input
          @keyup.enter.native="handleQuery"
          clearable
          placeholder="请输入所在省份"
          v-model="queryParams.province"
        />
      </el-form-item>
      <el-form-item label="手机号码" prop="phone">
        <el-input
          @keyup.enter.native="handleQuery"
          clearable
          placeholder="请输入手机号码"
          v-model="queryParams.phone"
        />
      </el-form-item>
      <el-form-item label="用户语言" prop="language">
        <el-input
          @keyup.enter.native="handleQuery"
          clearable
          placeholder="请输入用户语言"
          v-model="queryParams.language"
        />
      </el-form-item>
      <el-form-item label="union_id" prop="unionId">
        <el-input
          @keyup.enter.native="handleQuery"
          clearable
          placeholder="请输入union_id"
          v-model="queryParams.unionId"
        />
      </el-form-item>
      <el-form-item label="用户组" prop="groupId">
        <el-input
          @keyup.enter.native="handleQuery"
          clearable
          placeholder="请输入用户组"
          v-model="queryParams.groupId"
        />
      </el-form-item>
      <el-form-item label="标签列表" prop="tagidList">
        <el-input
          @keyup.enter.native="handleQuery"
          clearable
          placeholder="请输入标签列表"
          v-model="queryParams.tagidList"
        />
      </el-form-item>
      <el-form-item label="二维码扫码场景" prop="qrSceneStr">
        <el-input
          @keyup.enter.native="handleQuery"
          clearable
          placeholder="请输入二维码扫码场景"
          v-model="queryParams.qrSceneStr"
        />
      </el-form-item>
      <el-form-item label="地理位置纬度" prop="latitude">
        <el-input
          @keyup.enter.native="handleQuery"
          clearable
          placeholder="请输入地理位置纬度"
          v-model="queryParams.latitude"
        />
      </el-form-item>
      <el-form-item label="地理位置经度" prop="longitude">
        <el-input
          @keyup.enter.native="handleQuery"
          clearable
          placeholder="请输入地理位置经度"
          v-model="queryParams.longitude"
        />
      </el-form-item>
      <el-form-item label="地理位置精度" prop="precision">
        <el-input
          @keyup.enter.native="handleQuery"
          clearable
          placeholder="请输入地理位置精度"
          v-model="queryParams.precision"
        />
      </el-form-item>
      <el-form-item label="会话密钥" prop="sessionKey">
        <el-input
          @keyup.enter.native="handleQuery"
          clearable
          placeholder="请输入会话密钥"
          v-model="queryParams.sessionKey"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery" icon="el-icon-search" size="mini" type="primary">搜索</el-button>
        <el-button @click="resetQuery" icon="el-icon-refresh" size="mini">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          @click="handleAdd"
          icon="el-icon-plus"
          plain
          size="mini"
          type="primary"
          v-hasPermi="['weixin:user:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          :disabled="single"
          @click="handleUpdate"
          icon="el-icon-edit"
          plain
          size="mini"
          type="success"
          v-hasPermi="['weixin:user:edit']"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          :disabled="multiple"
          @click="handleDelete"
          icon="el-icon-delete"
          plain
          size="mini"
          type="danger"
          v-hasPermi="['weixin:user:remove']"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          @click="handleExport"
          icon="el-icon-download"
          plain
          size="mini"
          type="warning"
          v-hasPermi="['weixin:user:export']"
        >导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table :data="userList" @selection-change="handleSelectionChange" v-loading="loading">
      <el-table-column align="center" type="selection" width="55"/>
      <el-table-column align="center" label="主键" prop="id"/>
      <el-table-column align="center" label="创建者" prop="createId"/>
      <el-table-column align="center" label="更新者" prop="updateId"/>
      <el-table-column align="center" label="用户备注" prop="remark"/>
      <el-table-column align="center" label="应用类型" prop="appType"/>
      <el-table-column align="center" label="是否订阅" prop="subscribe"/>
      <el-table-column align="center" label="渠道来源" prop="subscribeScene"/>
      <el-table-column align="center" label="关注时间" prop="subscribeTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.subscribeTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="关注次数" prop="subscribeNum"/>
      <el-table-column align="center" label="取消关注时间" prop="cancelSubscribeTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.cancelSubscribeTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="用户标识" prop="openId"/>
      <el-table-column align="center" label="昵称" prop="nickName"/>
      <el-table-column align="center" label="性别" prop="sex"/>
      <el-table-column align="center" label="所在城市" prop="city"/>
      <el-table-column align="center" label="所在国家" prop="country"/>
      <el-table-column align="center" label="所在省份" prop="province"/>
      <el-table-column align="center" label="手机号码" prop="phone"/>
      <el-table-column align="center" label="用户语言" prop="language"/>
      <el-table-column align="center" label="头像" prop="headimgUrl"/>
      <el-table-column align="center" label="union_id" prop="unionId"/>
      <el-table-column align="center" label="用户组" prop="groupId"/>
      <el-table-column align="center" label="标签列表" prop="tagidList"/>
      <el-table-column align="center" label="二维码扫码场景" prop="qrSceneStr"/>
      <el-table-column align="center" label="地理位置纬度" prop="latitude"/>
      <el-table-column align="center" label="地理位置经度" prop="longitude"/>
      <el-table-column align="center" label="地理位置精度" prop="precision"/>
      <el-table-column align="center" label="会话密钥" prop="sessionKey"/>
      <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
        <template slot-scope="scope">
          <el-button
            @click="handleUpdate(scope.row)"
            icon="el-icon-edit"
            size="mini"
            type="text"
            v-hasPermi="['weixin:user:edit']"
          >修改
          </el-button>
          <el-button
            @click="handleDelete(scope.row)"
            icon="el-icon-delete"
            size="mini"
            type="text"
            v-hasPermi="['weixin:user:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      :limit.sync="queryParams.pageSize"
      :page.sync="queryParams.pageNum"
      :total="total"
      @pagination="getList"
      v-show="total>0"
    />

    <!-- 添加或修改微信用户对话框 -->
    <el-dialog :title="title" :visible.sync="open" append-to-body width="500px">
      <el-form :model="form" :rules="rules" label-width="80px" ref="form">
        <el-form-item label="创建者" prop="createId">
          <el-input placeholder="请输入创建者" v-model="form.createId"/>
        </el-form-item>
        <el-form-item label="更新者" prop="updateId">
          <el-input placeholder="请输入更新者" v-model="form.updateId"/>
        </el-form-item>
        <el-form-item label="用户备注" prop="remark">
          <el-input placeholder="请输入用户备注" v-model="form.remark"/>
        </el-form-item>
        <el-form-item label="逻辑删除标记" prop="delFlag">
          <el-input placeholder="请输入逻辑删除标记" v-model="form.delFlag"/>
        </el-form-item>
        <el-form-item label="是否订阅" prop="subscribe">
          <el-input placeholder="请输入是否订阅" v-model="form.subscribe"/>
        </el-form-item>
        <el-form-item label="渠道来源" prop="subscribeScene">
          <el-input placeholder="请输入渠道来源" v-model="form.subscribeScene"/>
        </el-form-item>
        <el-form-item label="关注时间" prop="subscribeTime">
          <el-date-picker clearable
                          placeholder="请选择关注时间"
                          type="date"
                          v-model="form.subscribeTime"
                          value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="关注次数" prop="subscribeNum">
          <el-input placeholder="请输入关注次数" v-model="form.subscribeNum"/>
        </el-form-item>
        <el-form-item label="取消关注时间" prop="cancelSubscribeTime">
          <el-date-picker clearable
                          placeholder="请选择取消关注时间"
                          type="date"
                          v-model="form.cancelSubscribeTime"
                          value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="用户标识" prop="openId">
          <el-input placeholder="请输入用户标识" v-model="form.openId"/>
        </el-form-item>
        <el-form-item label="昵称" prop="nickName">
          <el-input placeholder="请输入昵称" v-model="form.nickName"/>
        </el-form-item>
        <el-form-item label="所在城市" prop="city">
          <el-input placeholder="请输入所在城市" v-model="form.city"/>
        </el-form-item>
        <el-form-item label="所在国家" prop="country">
          <el-input placeholder="请输入所在国家" v-model="form.country"/>
        </el-form-item>
        <el-form-item label="所在省份" prop="province">
          <el-input placeholder="请输入所在省份" v-model="form.province"/>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input placeholder="请输入手机号码" v-model="form.phone"/>
        </el-form-item>
        <el-form-item label="用户语言" prop="language">
          <el-input placeholder="请输入用户语言" v-model="form.language"/>
        </el-form-item>
        <el-form-item label="头像" prop="headimgUrl">
          <el-input placeholder="请输入内容" type="textarea" v-model="form.headimgUrl"/>
        </el-form-item>
        <el-form-item label="union_id" prop="unionId">
          <el-input placeholder="请输入union_id" v-model="form.unionId"/>
        </el-form-item>
        <el-form-item label="用户组" prop="groupId">
          <el-input placeholder="请输入用户组" v-model="form.groupId"/>
        </el-form-item>
        <el-form-item label="标签列表" prop="tagidList">
          <el-input placeholder="请输入标签列表" v-model="form.tagidList"/>
        </el-form-item>
        <el-form-item label="二维码扫码场景" prop="qrSceneStr">
          <el-input placeholder="请输入二维码扫码场景" v-model="form.qrSceneStr"/>
        </el-form-item>
        <el-form-item label="地理位置纬度" prop="latitude">
          <el-input placeholder="请输入地理位置纬度" v-model="form.latitude"/>
        </el-form-item>
        <el-form-item label="地理位置经度" prop="longitude">
          <el-input placeholder="请输入地理位置经度" v-model="form.longitude"/>
        </el-form-item>
        <el-form-item label="地理位置精度" prop="precision">
          <el-input placeholder="请输入地理位置精度" v-model="form.precision"/>
        </el-form-item>
        <el-form-item label="会话密钥" prop="sessionKey">
          <el-input placeholder="请输入会话密钥" v-model="form.sessionKey"/>
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button @click="submitForm" type="primary">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {addUser, delUser, getUser, listUser, updateUser} from "@/api/weixin/user";

  export default {
    name: "User",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 微信用户表格数据
        userList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          createId: null,
          updateId: null,
          appType: null,
          subscribe: null,
          subscribeScene: null,
          subscribeTime: null,
          subscribeNum: null,
          cancelSubscribeTime: null,
          openId: null,
          nickName: null,
          sex: null,
          city: null,
          country: null,
          province: null,
          phone: null,
          language: null,
          headimgUrl: null,
          unionId: null,
          groupId: null,
          tagidList: null,
          qrSceneStr: null,
          latitude: null,
          longitude: null,
          precision: null,
          sessionKey: null
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          openId: [
            {required: true, message: "用户标识不能为空", trigger: "blur"}
          ],
        }
      };
    },
    created() {
      this.getList();
    },
    methods: {
      /** 查询微信用户列表 */
      getList() {
        this.loading = true;
        listUser(this.queryParams).then(response => {
          this.userList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          createId: null,
          createTime: null,
          updateId: null,
          updateTime: null,
          remark: null,
          delFlag: null,
          appType: null,
          subscribe: null,
          subscribeScene: null,
          subscribeTime: null,
          subscribeNum: null,
          cancelSubscribeTime: null,
          openId: null,
          nickName: null,
          sex: null,
          city: null,
          country: null,
          province: null,
          phone: null,
          language: null,
          headimgUrl: null,
          unionId: null,
          groupId: null,
          tagidList: null,
          qrSceneStr: null,
          latitude: null,
          longitude: null,
          precision: null,
          sessionKey: null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加微信用户";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        getUser(id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改微信用户";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateUser(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addUser(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认删除微信用户编号为"' + ids + '"的数据项？').then(function () {
          return delUser(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {
        });
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('weixin/user/export', {
          ...this.queryParams
        }, `user_${new Date().getTime()}.xlsx`)
      }
    }
  };
</script>
